<script setup lang="ts">
    import { ToolFilled } from '@ant-design/icons-vue';
    import { ref } from 'vue';
    import { useLoginStore } from '@/store/login';
    import { message } from 'ant-design-vue';
    
    const loginStore = useLoginStore();
    const updateModalOpen= ref(false);
    const passordData=ref({
        user_id: parseInt(loginStore.accountId),
        old_password:'',
        new_password:'',
    })

    const updateModal=()=>{
        updateModalOpen.value = !updateModalOpen.value;
    }
    const updatePassword= async()=>{
        if(passordData.value.old_password==''||passordData.value.new_password=='')
            message.error('请输入完整信息');
        await loginStore.updatePassword(passordData.value);
        updateModal()
    }

</script>

<template>
    <div style="flex-direction: column;; padding-left: 50px;background-color: #f5f5f5;">
        <h1 style="background-color: #f5f5f5; font-size: x-large;">账号设置</h1>
        <div style="width: 500px; background-color: #fff; display: flex;justify-content: space-between;">
            <div style="display: flex;margin: 40px;">
                <ToolFilled style="font-size: 30px; background-color: #fff;"/>
                <span style="font-size: x-large;">密码</span>
            </div>
            <div style="display: flex; align-items: center; justify-content: end;padding-right: 50px;">
                <a-button type="text" @click="updateModal"
                    style="
                        font-size: large;
                        display: flex;
                        align-items: center;
                        outline: 1px solid darkgray;">
                    修改密码
                </a-button>
                <a-modal v-model:open="updateModalOpen" :footer="null" maskClosable="false" bodyStyle="display: flex;flex-direction: column;justify-content: center;align-items: center;" width="500px" >
                    <a-form>
                        <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;margin-top: 20px;">
                      <p><span style="color: red;">*</span><span>旧密码：</span></p>
                      <a-input-password v-model:value="passordData.old_password" placeholder="" style="width: 18.5vw;"/>
                    </div>
                    <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;">
                        <p><span style="color: red;">*</span><span>新密码：</span></p>
                        <a-input-password  v-model:value="passordData.new_password" placeholder="" style="width: 18.5vw;"/>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; width: 52%; margin-top: 20px;">
                          <a-button type="primary" @click="updatePassword">确定</a-button>
                          <a-button type="text" style="outline: 2px solid darkgray;" @click="updateModal">取消</a-button>
                    </div>
                    </a-form>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<style lang="css" scoped>

</style>